<template>
  <a-modal class="common-modal" :title="null" :footer="null" :width="420" :visible="visible" :closable="false" style="top: 20%" @cancel="onTips" :maskStyle="{backgroundColor:'rgba(0, 0, 0, 0.15)'}">
    <section v-if="unlocakPage" class="lock-modal-content">
      <a-spin :spinning="confirmLoading">
        <header>
          <div>{{$t('layout.unlockScreen')}}</div>
          <div>
            <CloseOutlined @click="handleCancel" />
          </div>
        </header>
        <div class="p-20 warning-tip">
          <span class="warning-tip-icon">
            <ExclamationCircleOutlined />
          </span>
          {{$t('layout.screenLockPleaseInputAccount')}}
        </div>
        <a-form ref="formRef" :model="formState" :rules="rules" class="px-20 pb-2">
          <a-form-item name="username">
            <a-input v-model:value.trim="formState.username" :placeholder="$t('layout.pleaseInputAccount')" @keyup.enter="handleOk" autoComplete="off">
              <template #prefix>
                <UserOutlined class="site-form-item-icon" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item name="password">
            <a-input-password v-model:value.trim="formState.password" :placeholder="$t('layout.pleaseInputPwd')" @keyup.enter="handleOk" autoComplete="new-password">
              <template #prefix>
                <LockOutlined class="site-form-item-icon" />
              </template>
            </a-input-password>
          </a-form-item>
        </a-form>
        <div class="common-modal-footer">
          <a-button @click="handleCancel" class="cancel">{{$t('common.cancel')}}</a-button>
          <a-button @click="handleOk" type="primary" class="confirm">{{$t('common.ok')}}</a-button>
        </div>
      </a-spin>
    </section>
  </a-modal>
</template>

<script setup name="lockModal">
import { ref, onMounted } from 'vue';
import { UserOutlined, LockOutlined, CloseOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import axios from '@/utils/request';
import i18n from '@/locales/index' 
const { t } = i18n.global
let props = defineProps({
  userInfo: {
    type: Object,
    dafault: () => { }
  }
})
const emits = defineEmits(['colseLock'])
let formState = ref({})
const formRef = ref()
let visible = ref(false)
let unlocakPage = ref(false)
let confirmLoading = ref(false)
const open = async () => {
  confirmLoading.value = false
  visible.value = true
}
const validateAccount = async (_rule, value) => {
  if (!value) {
    return Promise.reject(t('layout.pleaseInputAccount'));
  } else if (value !== props.userInfo.userName) {
    return Promise.reject(t('layout.pleaseInputCurrentAccount'));
  } else {
    return Promise.resolve();
  }
};
const rules = {
  username: [
    { validator: validateAccount, trigger: 'change' },
  ],
  password: [{ required: true, trigger: 'change', message: t('layout.pleaseInputPwd') }]
};

const handleOk = async () => {
  try {
    const values = await formRef.value.validateFields()
    confirmLoading.value = true
    const res = await axios.postAction('/api/unlock-screen', values)
    confirmLoading.value = false
    if (res.success) {
      message.success(res.msg || t('layout.unlockTrue'))
      handleCancel()
      localStorage.setItem('lockModalVisible', 0)
      visible.value = false
      emits('colseLock')
    } else {
      message.warning(res.msg || t('layout.unlockFalse'))
    }
  } catch {
    confirmLoading.value = false
    console.log('error');
  }

};
const onTips = () => {
  if (unlocakPage.value) return
  message.config({
    maxCount: 1,
    duration: 2
  })
  message.warning({
    content: () => t('layout.screenLockLaterDo') ,
    class: 'lock-tip'
  });
}
const handleCancel = () => {
  formState.value = {}
  formRef.value && formRef.value.resetFields()
  localStorage.setItem('unlocakPage', 0)
  confirmLoading.value = false
  unlocakPage.value = false
}

defineExpose({
  open,
  unlocakPage
})

onMounted(() => {
  visible.value = localStorage.getItem('lockModalVisible') == 1
  unlocakPage.value = localStorage.getItem('unlocakPage') == 1
})

</script>